<template>
  <div class="my-like" :style="{ height: `${viewheight.GetViewHeight(180)}px` }">
    <CourseCardComponent :loading="loading" :coursepage="coursepage" :totalcourse="totalcourse" :disabled="disabled"
      @load-data="loadingData">
      <template #dropslot="slotValue">
        <el-dropdown-menu>
          <el-dropdown-item :icon="Erase" @click="removelike(slotValue.itemValue)">移除</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </CourseCardComponent>
  </div>
</template>

<script setup lang="ts">
import { useViewHeightStore } from "@/store/viewheight";
import CourseCardComponent from "@components/CourseCardComponent/CourseCardComponent.vue";
import { Erase } from "@icon-park/vue-next";
import { get_mycourse } from "@/api/courseapi";
import { Tcourse } from "@/models/course";
import { ref, watch } from "vue";
import { remove_Collect } from "@/api/courseapi";
import { pull } from "lodash";
import { RandomPicture } from "@utils/randompic";

const viewheight = useViewHeightStore();

const loading = ref<boolean>(false)
const coursepage = ref<Array<Tcourse>>([])
const totalcourse = ref<number>(0);
const disabled = ref<boolean>(false);

const loadingData = async (current: number) => {
  disabled.value = false;
  loading.value = true;
  const res = await get_mycourse({ current: current, size: 9 });
  if (res.code === 200) {
    if (res.data) {
      res.data.records.forEach((item) => {
        item.pic = RandomPicture();
      })
      coursepage.value = coursepage.value.concat(res.data.records);
      totalcourse.value = res.data.total;
    } else {
      disabled.value = true;
    }
    loading.value = false;
  }
}


const removelike = async (item: Tcourse) => {
  const res = await remove_Collect({ id: item.id });
  if (res.code === 200) {
    ElMessage.success(res.msg);
    pull(coursepage.value, item);
    return;
  }
  ElMessage.error(res.msg);
}


watch(() => coursepage.value, () => {
  if (coursepage.value.length === totalcourse.value) {
    disabled.value = true;
  }
})

</script>

<style scoped lang="less">
.my-like {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
}
</style>